<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>

    <!-- 加载静态文件 -->
    {% load static %}

    <!-- jQuery -->
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

    <!-- Layer -->
    <script type="text/javascript" src="{% static 'layer/layer.js' %}"></script>

    <!-- Common.js -->
    <script type="text/javascript" src="{% static 'js/common.js' %}"></script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
        {% if not user %}
            <span>您还没有登录，请登陆后再操作<br/></span>
        {% endif %}
        <span>没有收货地址的提示。。。</span>
    </div>
    <table class="table" id="goods">
        <tr>
            <td>商品名称</td>
            <td colspan="3">{{ goods.goods_name }}</td>
        </tr>
        <tr>
            <td>商品图片</td>
            <td colspan="3"><img src="{% static goods.goods_img %}" width="200" height="200"/></td>
        </tr>
        <tr>
            <td>秒杀开始时间</td>
            <td>{{ goods.start_date }}</td>
            <td id="seckillTip">
                <input type="hidden" id="remainSeconds" value="{{ goods.remain_seconds }}">
                {% if goods.sec_kill_status == 0 %}
                    <span>秒杀倒计时: <span id="countDown">{{ remainSeconds }}</span>秒</span>
                {% elif goods.sec_kill_status == 1 %}
                    <span>秒杀进行中</span>
                {% elif goods.sec_kill_status == 2 %}
                    <span>秒杀已结束</span>
                {% endif %}
            </td>
            <td>
{#                <form id="secKillForm" method="post" action="">#}
{#                    {% csrf_token %}#}
{#                    <input type="hidden" name="goodsId" value="{{ goods.id }}">#}
                <button class="btn btn-primary btn-block" type="submit" id="buyButton">立即秒杀</button>
{#                </form>#}
            </td>
        </tr>
        <tr>
            <td>商品原价</td>
            <td colspan="3">{{ goods.goods_price }}</td>
        </tr>
        <tr>
            <td>秒杀价</td>
            <td colspan="3">{{ goods.seckill_price }}</td>
        </tr>
        <tr>
            <td>库存数量</td>
            <td colspan="3">{{ goods.stock_count }}</td>
        </tr>
    </table>
</div>
</body>
<script>
    $(function () {
        countDown();
    });

    function countDown() {
        var remainSeconds = $("#remainSeconds").val();
        var timeout;
        // 秒杀还未开始
        if (remainSeconds > 0) {
            $("#buyButton").attr("disabled", true);
            timeout = setTimeout(function () {
                $("#countDown").text(remainSeconds - 1);
                $("#remainSeconds").val(remainSeconds - 1);
                countDown();
            }, 1000);
            // 秒杀进行中
        } else if (remainSeconds == 0 && {{ goods.sec_kill_status }}!=2 ) {
            $("#buyButton").attr("disabled", false);
            if (timeout) {
                clearTimeout(timeout);
            }
            $("#seckillTip").html("秒杀进行中");
        } else {
            $("#buyButton").attr("disabled", true);
            $("#seckillTip").html("秒杀已经结束");
        }
    }
    $(document).ready(function () {
        $('#buyButton').on('click', function () {
            // 从 Cookie 中读取 Token
            var token = getCookie('accessToken'); // 假设 Token 存储在名为 accessToken 的 Cookie 中

            // 如果未找到 Token，提示用户登录
            if (!token) {
                alert('未找到身份验证信息，请先登录！');
                return;
            }

            $.ajax({
                url: 'http://localhost:8001/seckill/doSeckill', // 替换为你的后端接口 URL
                method: 'POST',
                headers: {
                    'Authorization': 'Bearer ' + token, // 添加 Token 到请求头
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify({
                    goodsId:{{ goods.id }},
                    {#csrfmiddlewaretoken: '{{ csrf_token }}' // 添加 CSRF 令牌#}
                }),
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg("秒杀成功，正在创建订单");
                    } else {
                        if (data.code === 401) {
                        // 显示错误信息
                        layer.msg(data.message);

                        // 跳转到登录页面
                        window.location.href = 'http://localhost:8000/seckill_auth/login';
                        layer.msg(data.message);
                    }}
                },
                error: function (error) {
                    if (error.status === 401) {
                        // 显示错误信息
                        alert(error.responseJSON.message);

                        // 跳转到登录页面
                        window.location.href = 'http://localhost:8000/seckill_auth/login';

                    }
                }
            })
        })

    });
    function getCookie(name) {
    // 将所有 Cookie 按分号分割成数组
    let cookieArr = document.cookie.split(";");

    // 遍历每个 Cookie，查找目标名称
    for (let i = 0; i < cookieArr.length; i++) {
        let cookiePair = cookieArr[i].split("="); // 每个 Cookie 按等号分割为键值对
        if (name === cookiePair[0].trim()) { // 去除空格并匹配名称
            return decodeURIComponent(cookiePair[1]); // 返回解码后的值
        }
    }

    return null; // 如果未找到对应的 Cookie，返回 null
}
</script>
</html>